<template>
    <view class="container">
        <view class="container-body"  >
			<view class="card" v-for="(item,index) in list">
				<view class="card-1">
					<cover-image class="img1" :src=item.image></cover-image>
					<p style="margin-top: 20rpx; text-align: center; width: 100%; h">{{item.deptName}}</p>
					<p style="margin-top: 20rpx; text-align: center; width: 100%;">{{item.doctorName}}</p>
				</view>
				<view class="card-2">
				<view style="display: flex; width: 100%; height: 100%; flex-direction: column; justify-content: center; align-items: center;">
				<p>{{item.appointmentDate}}</p>
				<p style="font-size: 15px; color: blue;">{{item.appointmentPeriod}}</p>
				</view>
				</view>
				<view class="card-3">
					<view style="display: flex; width: 100%; height: 100%; flex-direction: column; justify-content: flex-end; align-items: flex-start;">
					<p style="font-size: 15px; color: blue; margin-bottom: 20rpx;">预约号:{{item.id}}</p>
				<view v-if="item.status=='NotPaid'" style="display: flex; flex-direction: row; justify-content: flex-end; margin-bottom: 25rpx;">
					<el-button type="primary" style="width: 150rpx;" @click="goPay">去缴费</el-button>
					<el-button type="primary" style="width: 150rpx;" @click="cancelAppointment(item.id)">取消预约</el-button>
				</view>
					</view>
				</view>id
	
			</view>
        </view>
 
    </view>
</template>

<script lang="ts" setup>
  
    import axiosInstance from '@/Config/axiosConfig'
    import globalStore from '@/store/GlobalStore';
    import Emessage from '@/Utils/Message';
	import {onMounted,watch} from 'vue'
	import { h, ref, shallowRef } from 'vue'
	import { onLoad } from '@dcloudio/uni-app';
	import DoctorApp from '../../entity/DoctorApp';
	const list=ref<DoctorApp>();
	list.value=[]
	const getAppointment=async()=>{
		try{
		const response=await axiosInstance.get('/patient/getRegistrationByPatientId?id='+globalStore.id);
		if(response.data.code==200)list.value=response.data.data;
		else if(response.data.code==201)Emessage(response.data.message,"warning")
		else Emessage("网络错误","error")
		}catch(e){
			Emessage("网络错误","error")
		}
	}
	onLoad((option)=>{
		getAppointment();
	})
//去缴费的页面
	const goPay=()=>{
		uni.navigateTo({
			url:'/pages/PayPage/PayPage'
		})
	}
	const cancelAppointment=async(id:string)=>{
		const response=await axiosInstance.get('/patient/cancelReserve?reserveId='+id);
		if(response.data.code==200)Emessage("取消预约成功","success");
		else Emessage("网络错误","error")
		getAppointment();
	}
</script>

<style>
   .container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
	
    }

   .container-title {
        width: 100%;
        height: 70rpx;
        display: flex;
        flex-direction: row;
        justify-items: center;

    }

   .container-body {
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 10rpx;
		align-items: center;
		overflow-y: hidden;
		
    }
	.container-body::-webkit-scrollbar {
	    width: 0; /* 水平滚动条宽度设为0 */
	}

   .card {
        border-radius: 30rpx;
        border: 2px solid gainsboro;
		margin-top: 20rpx ;
        width: 90%;
        height: 250rpx;
        display: flex;
        flex-direction: row;
        margin-bottom: 10rpx;
    }
	.card-1{
		width: 20%;
		display: flex;
		flex-direction: column;
	}
	.card-2{
		
		width: 30%;
		display: flex;
		flex-direction: column;
		margin-right: 15rpx;

	}
.text {
    padding: 10rpx;
    width: 95%;
    height: 90%;
    margin: auto;
    border: 1px solid gainsboro;
    word-wrap: break-word; /* 长单词换行 */
    overflow-wrap: break-word; /* 现代浏览器的替代方案 */
	overflow: hidden;
    word-break: break-word; /* 长单词与非单词内容都能换行 */
}

	.card-3{
		width: 40%;
		display: flex;
		flex-direction: column;
	}
	.card-3-app{
		display: flex;
		border-radius: 10rpx;
		flex-direction: column;
		width: 100%;
		height: 80%;
		overflow-x: hidden;
	}
	.card-3-app::-webkit-scrollbar {
	    width: 0; /* 水平滚动条宽度设为0 */
	}
	.order{
       border-radius: 10rpx;
        border: 2px solid gainsboro;
        margin-left: 20rpx;
		margin-top: 20rpx ;
        width: 90%;
        height: 100rpx;
        display: flex;
        flex-direction: row;
	
	}
   .img1 {
        border-radius: 120rpx;
        width: 120rpx;
        height: 120rpx;
		
		margin-top: 20rpx;
		margin-left: 10rpx;
    }

</style>